<template>
  <div class="home">
    <van-field class="reset-van-field" readonly clickable :value="currTenantNo" placeholder="请选择乡镇园区"
      @click="showPicker = true" />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="options" value-key="tenantFullName" @cancel="showPicker = false"
        @confirm="handleSelectChange" />
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data () {
    return {
      nodeDeepArray: [],
      nodeDeepCount: 1,

      tempSelectObj: '', // 注册地址选项联动用
      showPicker: false,
      options: [
        {
          id: 'shandong',
          tenantFullName: '山东省',
          children: [
            {
              id: 'jinan',
              tenantFullName: '济南市',
              children: null
            },
            {
              id: 'dalian',
              tenantFullName: '大连市',
              children: [
                {
                  id: 'changxing',
                  tenantFullName: '长兴县',
                  children: [
                    {
                      id: 'beixian',
                      tenantFullName: '北现村',
                      children: null
                    }
                  ]
                }, {
                  id: 'xianxia',
                  tenantFullName: '先霞县',
                  children: null
                }
              ]
            }
          ]
        },
        {
          id: 'zhejiang',
          tenantFullName: '浙江省',
          children: [
            {
              id: 'hangzhou',
              tenantFullName: '杭州市',
              children: null
            }
          ]
        }

      ],
      currTenantNo: '',

      tempObjLevel: 1,
      currentLevel: '',
      tenantId: ''
    }
  },
  mounted () {
    this.getMaxLevel()
    this.currentLevel = Math.max(...this.nodeDeepArray)
    console.log('当前最大层级：' + this.currentLevel)
    this.repairObjLevel()
  },
  methods: {
    // 补齐对象层级
    repairObjLevel () {
      let arr = this.options
      if (Array.isArray(arr)) {
        this.options.forEach(item => {
          // if (item.children !== null) {
          this.addPushObjectParams(item)
          // }
        })
      }

    },
    // 循环追加对象属性
    addPushObjectParams (node) {
      if (this.tempObjLevel < this.currentLevel) {
        if (node.children === null) {
          this.tempObjLevel++
          this.addParams(node)
          node.children.forEach(item => {
            this.addPushObjectParams(item)
          })
        } else {
          this.tempObjLevel++
          node.children.forEach(item => {
            this.addPushObjectParams(item)
          })
        }
      } else {
        this.tempObjLevel = 1
      }

    },
    // 追加对象参数
    addParams (node) {
      node.children = [
        {
          id: '',
          tenantFullName: '',
          children: null
        }
      ]
    },
    // 获取当前对象的最大层级数
    getMaxLevel () {
      const objArray = this.options
      if (Array.isArray(objArray)) {
        objArray.forEach(item => {
          this.nodeDeepCount = 1
          this.findNodeDeep(item)
          this.nodeDeepArray.push(this.nodeDeepCount)
        })
      }
    },

    // 节点循环
    findNodeDeep (node) {
      this.nodeDeepCount++
      if (Array.isArray(node.children)) {
        node.children.forEach(item => {
          if (item.children !== null) {
            this.findNodeDeep(item)
          }
        })
      }
    },

    // 选择后获取的状态值
    handleSelectChange (value, findIdIndex) {
      const newValue = []
      const newFindIdIndex = []
      // 获取选项中的label值
      if (Array.isArray(value)) {
        value.forEach((item, index) => {
          if (item) {
            newValue.push(item)
            newFindIdIndex.push(findIdIndex[index])
            this.tempSelectObj = this.options
            newFindIdIndex.forEach((element, index) => {
              if (index === newFindIdIndex.length - 1) {
                // 获取id值
                this.tenantId = this.tempSelectObj[element].id
              }
              this.tempSelectObj = this.tempSelectObj[element].children
            })
          }
        })
        this.currTenantNo = newValue.join(' / ')
        console.log(this.tenantId)
        this.showPicker = false
      } else {
        this.showPicker = false
        this.currTenantNo = value.tenantFullName
      }
    }
  }
}
</script>
